<template>
	<view class="app">
		<view class="main-wrap show">
			<view class="state-wrap column">
				<view class="row">
					<text class="state">待付款</text>
					<text class="mix-icon icon-you"></text>
				</view>
				<text class="tip">请尽快支付订单，超时将自动取消</text>
			</view>

			<view class="addr-sec wl">
				<text class="mix-icon icon-wuliuyunshu"></text>
				<view class="con column">
					<text class="context">北京市东城区前门地铁站 </text>
					<text class="time">姓名 13954127841</text>
				</view>
				<text class="mix-icon icon-you"></text>
			</view>

			<view class="addr-sec">
				<text class="mix-icon icon-dizhi"></text>
				<view class="con column">
					<text class="addr">大幅度发大饭店分店的</text>
					<text class="name">姓名 13954127841</text>
				</view>
			</view>

			<view class="goods-sec">
				<view class="list show" v-for="(item, index) in proList" :key="index">
					<view class="item row b-b">
						<image class="pic" :src="item['imglist'][0]" mode="aspectFill"></image>
						<view class="right column">
							<text class="title clamp">{{ item.name}}</text>
							<text class="sku">{{ item.typename}}</text>
							<view class="price-wrap">
								<text class="price">{{ item.money }}</text>
								<text class="number">x 2</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="price-sec">
				<view class="cell row">
					<text class="tit fill">商品金额</text>
					<text>￥ 1242.45</text>
				</view>
				<view class="cell row">
					<text class="tag">满</text>
					<text class="tit fill">订单满减</text>
					<text>￥0</text>
				</view>
				<view class="cell row">
					<text class="tag red">券</text>
					<text class="tit fill">优惠券</text>
					<text>-￥12</text>
				</view>
				<view class="cell row">
					<text class="tit fill">配送费</text>
					<text>￥0</text>
				</view>
				<view class="total row b-t">
					<text class="price">￥21</text>
				</view>
			</view>


			<view class="board">
				<view class="cell">
					<text class="tit">订单编号：</text>
					<text class="text">232334343</text>
					<!-- #ifndef H5 -->
					<view class="copy-btn center round">
						<text>复制</text>
					</view>
					<!-- #endif -->
				</view>
				<view class="cell">
					<text class="tit">下单时间：</text>
					<text class="text">2020-02-20</text>
				</view>
				<view class="cell">
					<text class="tit">支付方式：</text>
					<text class="text">支付宝支付</text>
				</view>
				<view class="cell">
					<text class="tit">订单备注：</text>
					<text class="text">大萨达撒撒旦</text>
				</view>
			</view>

			<view class="bottom-fill-view"></view>
			<view class="page-bottom row">

				<view class="btn center round">
					<text>取消订单</text>
				</view>

				<!-- #ifdef MP -->
				<button type="default" open-type="contact">
					<view class="btn center round">
						<text>联系客服</text>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="btn center round">
					<text>申请退款</text>
				</view>
				<!-- #endif -->
				<!-- <view v-if="data.status===1" class="btn center round" @click="navTo('zizhufahuo?id='+data._id)">
					<text>自助发货</text>
				</view> -->

				<view class="btn center">
					<text>确认收货</text>
				</view>

			</view>



		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				proList: [],
			}
		},
		onLoad() {
			let that = this;
			that.proList = that.globals.proList;
			console.log('产品数据', that.proList);
		},
		methods: {
			// ----- 跳转订单 ----
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.app {
		padding-bottom: 24rpx;
	}

	.main-wrap {
		padding: 0 20rpx;
		opacity: 0;
		transition: .2s;

		&.show {
			opacity: 1;
		}
	}

	.state-wrap {
		padding: 30rpx 20rpx 30rpx;

		.state {
			font-size: 38rpx;
			color: #333;
			font-weight: 700;
		}

		.tip {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #666;
		}

		.icon-you {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.addr-sec {
		display: flex;
		padding: 20rpx;
		margin-bottom: 16rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;

		&.wl {
			align-items: center;

			.con {
				padding-right: 0;
				padding-left: 56rpx;
			}

			.icon-wuliuyunshu {
				position: absolute;
				top: 22rpx;
				font-size: 40rpx;
				color: #1d96ff;
			}

			.context {
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #1d96ff;
				line-height: 1.4;
				word-break: break-all;
				text-indent: -10rpx;
			}

			.time {
				font-size: 24rpx;
				color: #999;
			}

			.icon-you {
				margin-left: 10rpx;
				font-size: 26rpx;
				color: #999;
			}
		}

		.icon-dizhi {
			transform: translateY(6rpx);
			width: 52rpx;
			font-size: 36rpx;
			color: $base-color;
		}

		.con {
			flex: 1;
			padding: 0 80rpx 10rpx 0;
		}

		.addr {
			margin-bottom: 16rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 1.4;
		}

		.name {
			font-size: 28rpx;
			color: #999;
		}
	}

	.goods-sec {
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;

		/deep/ .list .title {
			font-size: 28rpx;
		}
	}

	.price-sec {
		padding-top: 14rpx;
		border-radius: 0 0 10rpx 10rpx;
		background-color: #fff;

		.cell {
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			color: #333;
		}

		.total {
			justify-content: flex-end;
			height: 80rpx;
			padding-right: 20rpx;
			margin-top: 16rpx;
			font-size: 32rpx;
			color: $base-color;
			font-weight: 700;

			.price:before {
				content: '实付款 ';
				position: relative;
				bottom: 2rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.tag {
			padding: 6rpx 8rpx;
			margin-right: 8rpx;
			font-size: 20rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: orange;

			&.red {
				background-color: $base-color;
			}
		}
	}

	.board {
		padding: 10rpx 20rpx;
		margin-top: 16rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.cell {
			display: flex;
			min-height: 62rpx;
			padding: 12rpx 0;

			.tit {
				font-size: 26rpx;
				color: #666;
				line-height: 36rpx;
			}

			.text {
				flex: 1;
				font-size: 26rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.copy-btn {
			padding: 8rpx 12rpx;
			font-size: 22rpx;
			color: #333;

			&:after {
				border-radius: 10rpx;
				border-color: #bbb;
			}
		}
	}

	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		justify-content: flex-end;
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);

		.btn {
			width: 168rpx;
			height: 68rpx;
			margin-right: 24rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}

		.round {
			background-color: #fff;
			color: #333;
		}
	}

	.bottom-fill-view {
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.timeline-content {}

	.timeline-content {
		position: relative;
		padding-bottom: 30rpx;

		.timeline-scroll {
			width: 600rpx;
			height: 700rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;

			/deep/ {
				.mix-timeline {
					padding: 40rpx 20rpx 10rpx;
				}
			}
		}

		.icon-guanbi1 {
			position: absolute;
			left: 50%;
			bottom: -100rpx;
			padding: 20rpx;
			font-size: 40rpx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
</style>


<style scoped lang="scss">
	.more-btn {
		padding: 16rpx 0 12rpx;
		margin-top: -4rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		z-index: 10;
		background-color: #fff;

		.icon-xia {
			margin-left: 4rpx;
			font-size: 28rpx;
		}

		.active {
			transform: scale(-1);
		}
	}

	.list {
		max-height: 380rpx;
		overflow: hidden;

		&.show {
			max-height: 9999rpx;
		}
	}

	.item {
		width: 100%;
		height: 190rpx;
		padding: 24rpx 0 24rpx 24rpx;
		background-color: #fff;

		&:after {
			border-color: #e5e5e5;
		}
	}

	.pic {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
	}

	.right {
		flex: 1;
		color: #333;
		overflow: hidden;
	}

	.title {
		margin-right: 24rpx;
		margin-top: 0rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.sku {
		height: 40rpx;
		margin: 10rpx 0 20rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888;
	}

	.price-wrap {
		display: flex;
		align-items: baseline;
		padding-right: 20rpx;
	}

	.price {
		margin-right: 16rpx;
		font-size: 28rpx;
		line-height: 1;

		&:before {
			content: "￥";
			font-size: 26rpx;
		}
	}

	.number {
		font-size: 26rpx;
		color: #666;
	}
</style>
